<template>
    <!-- 顶部导航栏容器，支持自定义样式和类名 -->
    <view :style="headerStyle" :class="headerClass">
        <!-- 内容包装器，控制整体布局 -->
        <view class="wrapper" :style="contentStyle">
            <!-- 左侧区域：返回按钮与插槽 -->
            <view class="lf">
                <!-- 条件渲染返回按钮 -->
                <template v-if="showBack">
                    <!-- 返回按钮，点击触发 onBack 方法 -->
                    <view class="back" :style="contentStyle" @click="onBack">
                        <uni-icons type="left" size="20" />
                    </view>
                </template>
                <!-- 左侧插槽，供外部传入内容 -->
                <view class="slot">
                    <slot name="left" />
                </view>
            </view>

            <!-- 中间内容区域，条件显示 -->
            <view class="content" v-if="showContent">
                <slot />
            </view>
        </view>
        <!-- 底部插槽，供外部传入内容 -->
        <view>
            <slot name="bottom" />
        </view>
    </view>
    <!-- 占位元素，用于防止内容被导航栏遮挡 -->
    <template v-if="placeholder">
        <view class="placeholder" :style="headerPlaceholderStyle"></view>
    </template>
</template>

<script setup lang="ts">
import { useSystemStore } from "@/store";
import { onBack } from "@/utils";
import { useHooks } from "./hooks";
import { useNamespace } from "@/hooks";

const ns = useNamespace("header");

const system = useSystemStore();

/**
 * @description header 样式
 * */
const { headerPlaceholderStyle } = useHooks();

/**
 * @description 定义组件接收的属性
 * @property {Boolean} placeholder - 是否显示占位元素，默认为 true
 * @property {Boolean} showContent - 是否显示中间内容区域，默认为 true
 * @property {Boolean} showBack - 是否显示返回按钮，默认为 false
 * @property {String} customHeaderClass - 自定义头部类名，默认为空字符串
 * @property {String} headerBackground - 头部背景色，默认为 white
 */
const props = defineProps({
    placeholder: {
        type: Boolean,
        default: true
    },
    showContent: {
        type: Boolean,
        default: true
    },
    showBack: {
        type: Boolean,
        default: false
    },
    customHeaderClass: {
        type: String,
        default: ""
    },
    headerBackground: {
        type: String,
        default: "white"
    }
});

/**
 * @description 计算 header 的类名列表
 * @returns {Array} 包含默认类名和自定义类名的数组
 */
const headerClass = computed(() => {
    return [ns.b(), "common-header", props.customHeaderClass];
});

/**
 * @description 计算内容区域的样式，主要用于设置高度
 * @returns {Object} 包含高度样式的对象
 */
const contentStyle = computed(() => {
    return {
        height: system.navigationBarHeight + "px"
    };
});

/**
 * @description 计算 header 的样式，包括状态栏安全区和背景色
 * @returns {Object} 包含背景色和安全区样式的对象
 */
const headerStyle = computed(() => {
    return {
        ...system.safeAreaStatusBarStyle,
        background: props.headerBackground
    };
});
</script>

<style scoped lang="scss">
@import "./index";
</style>
